<!doctype html>
<html>
    <head>
        
        <title>jsPlumb 1.5.5 demo - YUI3</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />		
		<link rel="stylesheet" href="../demo-all.css">
        <link rel="stylesheet" href="../flowchart/demo.css">
        <link rel="stylesheet" href="../perimeterAnchors/demo.css">
        <link rel="stylesheet" href="../draggableConnectors/demo.css">
        <link rel="stylesheet" href="../chart/demo.css">
        <link rel="stylesheet" href="../sourcesAndTargets/demo.css">
        <link rel="stylesheet" href="../dynamicAnchors/demo.css">
        <link rel="stylesheet" href="../animation/demo.css">
        <link rel="stylesheet" href="../statemachine/demo.css">
    </head>
    <body data-demo-id="home" data-library="jquery">
        <div id="headerWrapper">
            <div id="header">
                <div class="menu">   
                    <a href="http://localhost:4567">DOCS</a>
                    <a href="../../apidocs/">API</a>
                    <a href="../../tests/all-tests.html">TESTS</a>
                    <a href="mailto:hello@jsplumbtoolkit.com">CONTACT</a>
                    <a href="http://github.com/sporritt/jsplumb/">GITHUB</a>
                    <a href="https://groups.google.com/forum/?fromgroups#!forum/jsplumb">DISCUSS</a>
                    <a href="https://github.com/sporritt/jsPlumb/issues">ISSUES</a>
                </div>
            </div>
        </div>    
		
        <div id="main">			
            <div class="demo flowchart-demo" id="flowchart-demo">
                <div class="window" id="flowchartWindow1"><strong>1</strong><br/><br/></div>
                <div class="window" id="flowchartWindow2"><strong>2</strong><br/><br/></div>
                <div class="window" id="flowchartWindow3"><strong>3</strong><br/><br/></div>
                <div class="window" id="flowchartWindow4"><strong>4</strong><br/><br/></div>     
                <div class="explanation">
                    <h4>FLOWCHART</h4>
                    <p>Hover over connections to highlight them, click to delete. </p>
                    <p>Drag new connections from hollow dots to solid dots. You can also drag connections from their source/target to other sources/targets, or back onto themselves.</p>
                    <p>By default, Flowchart connectors have square corners, but by setting the 'cornerRadius' parameter, as we have here, you can get rounded corners.</p>                                
                </div>
            </div>

            <div class="demo statemachine-demo" id="statemachine-demo">
                <div class="w" id="opened">BEGIN<div class="ep"></div></div>
                <div class="w" id="phone1">PHONE INTERVIEW 1<div class="ep"></div></div>
                <div class="w" id="phone2">PHONE INTERVIEW 2<div class="ep"></div></div>
                <div class="w" id="inperson">IN PERSON<div class="ep"></div></div>
                <div class="w" id="rejected">REJECTED<div class="ep"></div></div>           
                <div class="explanation">
                    <h4>STATE MACHINE</h4>
                    <p>Nodes are connected with the StateMachine connector.</p>
                    <p>Endpoints are located with 'Continuous' anchors, which are anchors whose location is calculated based on the location of all other connected elements, and which guarantee a unique endpoint per connection.
                    </p>                                
                    <p>Click and drag new Connections from the orange div in each element; the main elements in the UI are configured to be Connection targets. You can drag from one of these divs onto its parent element to create a 'loopback' connection. Each element supports up to 5 Connections.</p>
                    <p>Click on a Connection to delete it.</p>
                </div>  
            </div>

            <div id="drag-drop-demo" class="demo drag-drop-demo">
                <div class="window" id="dragDropWindow1">one<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow1">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow1">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow1">detach all</a></div>
                <div class="window" id="dragDropWindow2">two<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow2">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow2">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow2">detach all</a></div>
                <div class="window" id="dragDropWindow3">three<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow3">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow3">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow3">detach all</a></div>
                <div class="window" id="dragDropWindow4">four<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow4">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow4">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow4">detach all</a></div>          
                <div id="list"></div>
                <div class="explanation">         
                    <h4>DRAG &amp; DROP</h4>       
                    <p>Drag from any Endpoint to similar Endpoints on other elements to create Connections.</p>
                    <p>Blue Endpoints use a <strong>beforeDrop</strong> interceptor.  This enables
                    you to intercept a new connection and decide whether or not you wish to allow it to proceed. They are also configured to automatically reattach if you drag a Connection off and drop it on the background.</p>
                    <p>Yellow Endpoints are configured to use a <strong>beforeDetach</strong> interceptor, which provides a way to programmatically override a Connection detach. Yellow connections are painted with the Straight connector</p>            
                    <p>Green Endpoints support up to three Connections. Once a green Endpoint has three connections, when you drag from it you will drag the oldest connection made on the Endpoint.</p>
                    <a id="clear" class="cmd" href="#">clear plumbing</a>                          
                </div>  
            </div>

            <div class="demo perimeter-demo" id="perimeter-demo">
                <div class="shape" data-shape="Rectangle">Rectangle</div>
                <div class="shape" data-shape="Ellipse">Ellipse</div>
                <div class="shape" data-shape="Circle">Circle</div>
                <div class="shape" data-shape="Diamond">Diamond</div>
                <div class="shape" data-shape="Triangle" style="left:700px;top:380px;">Triangle</div>
                <div class="shape _90" data-shape="Triangle" data-rotation="90" style="left:60px;top:500px;">90&#176; rotation</div>
                <div class="explanation">
                    <h4>PERIMETER ANCHORS</h4>
                    <p>This is a demonstration of the 'perimeter' anchor functionality in jsPlumb - anchor points that track the perimeter of some shape or curve.
                    </p>  
                </div>  
            </div>            

            <div class="demo chart-demo" id="chart-demo">
                <div class="window" id="chartWindow1">window one</div>
                <div class="window" id="chartWindow2">window two</div>
                <div class="window" id="chartWindow3">window three</div>
                <div class="window" id="chartWindow4">window four</div>
                <div class="window" id="chartWindow5">window five</div>
                <div class="window" id="chartWindow6">window six</div>
                <div class="explanation">
                    <h4>CHART</h4>
                    <p>This is a simple demonstration of using jsPlumb to display hierarchical information.</p>
                    <p>Connectors have a paintStyle of `gray` and specify an endpoint of radius 9.
                    Each connection has an Arrow overlay indicating direction, and paints itself orange on mouse hover
                    </p>
                    <p>The Bezier curve used on this page has a 'curviness' of 50; See the documentation for examples of how to set the Bezier curviness.</p>
                </div>
            </div>

            <div class="demo source-target-demo" id="source-target-demo">
                <div class="window" id="sourceWindow1">           
                    <strong>Window 1</strong>
                    <a href="#" id="enableDisableSource">disable</a>                
                </div>
                <div class="window smallWindow" id="targetWindow2"><strong>Window 2</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow3"><strong>Window 3</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow4"><strong>Window 4</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow5"><strong>Window 5</strong><br/><br/></div>
                <div class="window smallWindow" id="targetWindow6"><strong>Window 6</strong><br/><br/></div>

                <div class="explanation">
                    <h4>SOURCES &amp; TARGETS</h4>
                    <p>This page provides a demonstration of the makeSource and makeTarget functions.</p>
                    <p>Drag Connections from the blue element to any of the green ones. You can also drag existing
                        Connections from one green element to another - Connections are, by default, detachable (this behaviour can be overridden).</p>
                    <p>These functions provide an alternative means of setting up your UI to support draggable connections - here we treat entire
                    elements as sources and targets, and only when Connections are established do we assign Endpoints for them.</p>
                    <p>The blue element is configured as a Connection source (and is not draggable), with a list of possible Anchor locations.</p>          
                    <p>
                    The 'disable' link is excluded from being a drag source through the use of the 'filter' parameter on the makeSource call.
                    </p>
                    <p>The green elements are configured as Connection targets, with a "TopCenter" anchor, and are draggable</p>
                </div>                  
            </div>

            <div class="demo dynamic-demo" id="dynamic-demo">
                <div class="window" id="dynamicWindow1"><strong>1</strong><br/><br/></div>
                <div class="window" id="dynamicWindow2"><strong>2</strong><br/><br/></div>
                <div class="window" id="dynamicWindow3"><strong>3</strong><br/><br/></div>
                <div class="window" id="dynamicWindow4"><strong>4</strong><br/><br/></div>
                <div class="window" id="dynamicWindow5"><strong>5</strong><br/><br/></div>
                <div class="window" id="dynamicWindow6"><strong>6</strong><br/><br/></div>                
                <div class="explanation">
                    <h4>DYNAMIC ANCHORS</h4>
                    <p>This is a demonstration of anchors that change position dependent on the location of the other element in a connection. Each connection is decorated with a Diamond overlay, located halfway along the connector.</p>
                    <p>You can drag new connections between blue endpoints.</p>
                    <p>Endpoints support an unlimited number of connections.</p>
                </div>  
            </div>

            <div class="demo animation-demo" id="animation-demo">
                <div class="bigdot" id="bd1"></div>
                <div class="bigdot" id="bd2"></div>
                <div class="bigdot" id="bd3"></div>
                <div class="bigdot" id="bd4"></div>
                <div class="explanation">
                    <h4>ANIMATION</h4>
                    <p>This is a demonstration of jsPlumb's 'animate' method.</p>
                    <p>Drag orange dots to create connections.</p>
                    <p>Click on or near blue dots to make them move in that direction.</p>
                    <p><a id="add" href="#" class="cmd">add a disc</a></p>
                    <p><a id="clear" href="#" class="cmd">remove all connections</a></p>
                </div>                    
            </div>
        </div>
	
        
        <!-- DEP -->
	    <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script
		<!-- /DEP -->
				
		<!-- JS -->
		<!-- support lib for bezier stuff -->
		<script src="../../lib/jsBezier-0.6.js"></script>
        <!-- jsplumb geom functions -->   
        <script src="../../lib/jsplumb-geom-0.1.js"></script>
		<!-- jsplumb util -->
		<script src="../../src/util.js"></script>
        <!-- base DOM adapter -->
		<script src="../../src/dom-adapter.js"></script>
		<!-- main jsplumb engine -->
		<script src="../../src/jsPlumb.js"></script>
        <!-- endpoint -->
		<script src="../../src/endpoint.js"></script>
        <!-- connection -->
		<script src="../../src/connection.js"></script>
        <!-- anchors -->
		<script src="../../src/anchors.js"></script>
		<!-- connectors, endpoint and overlays  -->
		<script src="../../src/defaults.js"></script>
        <!-- bezier connectors -->
        <script src="../../src/connectors-bezier.js"></script>
		<!-- state machine connectors -->
		<script src="../../src/connectors-statemachine.js"></script>
        <!-- flowchart connectors -->
		<script src="../../src/connectors-flowchart.js"></script>
		<!-- SVG renderer -->
		<script src="../../src/renderers-svg.js"></script>
		<!-- canvas renderer -->
		<script src="../../src/renderers-canvas.js"></script>
		<!-- vml renderer -->
		<script src="../../src/renderers-vml.js"></script>
        
        <!-- jquery jsPlumb adapter -->
		<script src="../../src/yui.jsPlumb.js"></script>
		<!-- /JS -->
		
		<!--  demo code -->
		<script src="../flowchart/demo.js"></script>
        <script src="../draggableConnectors/demo.js"></script>
        <script src="../perimeterAnchors/demo.js"></script>
        <script src="../statemachine/demo-jquery.js"></script>
        <script src="../chart/demo.js"></script>
        <script src="../sourcesAndTargets/demo.js"></script>
        <script src="../dynamicAnchors/demo.js"></script>
        <script src="../animation/demo.js"></script>
        
    </body>
</html>